<template>
  <div class="flex">
    <left2></left2>
    <div style="width: calc(100vw - 260px); padding: 30px;">
      <div class="flex">
        <el-button type="primary" @click='log2 = true'>获取示波器数值</el-button>
        <el-button type="primary" @click='canshushezhi'>参数设置</el-button>

        <el-button type="primary" @click='fuliye'>傅里叶切换</el-button>
      </div>


      <div id="main" style="width: 100%; height:95vh;"></div>
    </div>
    <!-- <el-upload class="upload-demo" ref="upload" action="#" :on-change="handlePreview" :show-file-list="false" :auto-upload="false" style="position: absolute; left: 20px; top: 20px; z-index: 999;">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload> -->
    <el-dialog title="发送udp请求" center :visible.sync="log2" width="450px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">ip</div>
          <div><el-input v-model="all.ip" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">端口</div>
          <div><el-input v-model="all.port" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">内容</div>
          <div><el-input v-model="all.content" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">本地端口</div>
          <div><el-input v-model="all.localPort" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
        </div>


        <span slot="footer" class="dialog-footer">

          <el-button type="danger" round @click="log2 = false">取消</el-button>
          <el-button type="danger" round @click="lianjie">发送</el-button>
        </span>
    </el-dialog>

    <el-dialog title="参数设置" center :visible.sync="log3" width="1000px"  :close-on-click-modal="false" :close-on-press-escape="false">

      <div style="font-weight: bold; margin-bottom: 20px;">请求地址</div>

      <div class="flexc">
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 80px; text-align: right;">ip</div>
          <div><el-input v-model="all3.ip" style="width: 200px; margin-left: 30px;" placeholder="请输入ip"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 80px; text-align: right;">端口</div>
          <div><el-input v-model="all3.port" style="width: 200px; margin-left: 30px;" placeholder="请输入端口"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 80px; text-align: right;">本地端口</div>
          <div><el-input v-model="all3.localPort" style="width: 200px; margin-left: 30px;" placeholder="请输入本地端口"></el-input></div>
        </div>
      </div>


      <div v-if="show">
        <div style="width: 100%; height: 1px; margin-bottom: 20px; background: #ccc;"></div>
        <div style="font-weight: bold; margin-bottom: 20px;">采集参数</div>
          <div class="flexc">
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">mac</div>
              <div><el-input v-model="all3.mac" style="width: 250px; margin-left: 30px;" placeholder="请输入mac"></el-input></div>
            </div>
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">IP地址</div>
              <div><el-input v-model="all3.getIp" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
            </div>
          </div>
          <div class="flexc">
            <div class="flexc" style="margin-bottom: 20px;">
             <div style="width: 100px; text-align: right;">采集类型</div>
             <div>
               <el-select v-model="all3.cjType"  style="width: 250px; margin-left: 30px;"  clearable placeholder="请选择采集类型">
                   <el-option  v-for="item in xialaall.caijileixinglist" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
               </el-select>
             </div>
           </div>
           <div class="flexc" style="margin-bottom: 20px;">
             <div style="width: 100px; text-align: right;">采样率</div>
             <div><el-input v-model="all3.cyLv" disabled style="width: 250px; margin-left: 30px;" placeholder="请输入采样率"></el-input></div>
           </div>
          </div>
          <div class="flexc">
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">分频</div>
              <div>
                <el-select v-model="all3.fp" style="width: 250px; margin-left: 30px;"  clearable placeholder="请选择分频">
                    <el-option  v-for="item in xialaall.fenpinlist" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
                </el-select>
              </div>
            </div>

            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">过采样率倍数</div>
              <div>
                <el-select v-model="all3.cyBs" style="width: 250px; margin-left: 30px;"  clearable placeholder="请选择过采样率倍数">
                    <el-option  v-for="item in xialaall.beicaiyanglist" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="flexc">
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">缓存长度</div>
              <div><el-input v-model="all3.cacheLength" style="width: 250px; margin-left: 30px;" placeholder="请输入缓存长度"></el-input></div>
            </div>
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">时间</div>
              <div>
                <el-date-picker v-model="all3.time" type="datetime" style="width: 250px; margin-left: 30px;" value-format="yyMMddHHmmss" placeholder="选择时间"></el-date-picker>
              </div>
            </div>
          </div>
            <div class="flexc" style="margin-bottom: 20px;">
              <div style="width: 100px; text-align: right;">保留字段</div>
              <div><el-input v-model="all3.reserved" style="width: 250px; margin-left: 30px;" placeholder="请输入"></el-input></div>
            </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="huoqu">获取</el-button>
        <el-button type="primary" @click="baocun"  v-if="show">设置</el-button>
        <el-button type="danger" @click="log3 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // const math = require('mathjs');

  // import {fft} from 'mathjs'

  // const fft = require('fft-js').fft;
  // const fftUtil = require('fft-js').util;

  // const DSP = require('dsp.js');


  import { getxiala } from '@/api/zidian'
  import { lianjieshuju,getparam,setparam } from '@/api/shiboqi'
  import moment from 'moment';
  import * as echarts from 'echarts';
  import 'echarts-gl';
  import left2 from '@/view/left2.vue'
	export default {
		name: 'shiboqi',
    components:{
      left2
    },
		data() {
			return {
        show:false,
        log2:false,
        month:moment().format('YYYY-MM'),
        type:1,
        list2:"",

        yizhou:{
          count:"",
          data:"",
          time:""
        },

        shu:[],

        all:{
          "ip":"127.0.0.1",
          "port":"8966",
          "content":"11554a",
          "localPort":"777",
        },
        ws:"",
        chartDom:"",
        myChart:"",
        option:"",
        log3:false,
        xialaall:{},

        all3:{
          "ip":"127.0.0.1",
          "port":"8966",
          "localPort":"777",
          "mac":"",
          "getIp":"",
          "cjType":"",
          "fp":"",
          cyLv:"",
          "cyBs":"",
          "cacheLength":"",
          "time":"",
          "reserved":"",
        },
        fuliyem:false
			}
		},
		created() {



      // // 示例小数信号
      // const decimalSignal = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6];

      // // 创建一个实例
      // const fft = new DSP.FFT(decimalSignal.length, 1);

      // // 执行傅里叶变换
      // fft.forward(decimalSignal);

      // // 获取频率数组和幅度数组
      // const frequencies = fft.getFreqs();
      // const magnitudes = fft.getSpectrum();

      // // 输出结果
      // console.log('频率数组:', frequencies);
      // console.log('幅度数组:', magnitudes);

      this.getxialaall()
		},
		mounted() {
      console.log(math)
      this.qushitu()
      window.onresize = this.myChart.resize

		},
    beforeDestroy() {
      this.ws = ""
    },
		methods: {
      canshushezhi:function(){
        this.all3 = {
          "ip":"127.0.0.1",
          "port":"8966",
          "localPort":"777",
          "mac":"",
          "getIp":"",
          "cjType":"",
          cyLv:"",
          "fp":"",
          "cyBs":"",
          "cacheLength":"",
          "time":"",
          "reserved":""
        }
        this.show = false
        this.log3 = true
      },
      huoqu:function(){
        // let response = {
        //   "type":"1",
        //   "mac":"00-A5-66-12-44-B7",
        //   "getIp":"192.168.15.11",
        //   "cjType":8,
        //   "cyLv":256000,
        //   "cacheLength":65536,
        //   "time":"240410213425",
        //   "reserved":"000055A8008054A8"
        // }

        // this.all3.type = response.type
        // this.all3.mac = response.mac
        // this.all3.getIp = response.getIp
        // this.all3.cyLv = response.cyLv
        // this.all3.cjType = response.cjType
        // // this.all3.fp = response.fp
        // // this.all3.cyBs = response.cyBs
        // this.all3.cacheLength = response.cacheLength
        // this.all3.time = response.time
        // this.all3.reserved = response.reserved

        let obj = {
          "ip":this.all3.ip,
          "port":this.all3.port,
          "localPort":this.all3.localPort,
        }
        getparam(obj).then((response)=>{
          this.all3.type = response.data.type
          this.all3.mac = response.data.mac
          this.all3.getIp = response.data.getIp
          this.all3.cyLv = response.data.cyLv
          this.all3.cjType = response.data.cjType
          this.all3.fp = response.data.fp
          this.all3.cyBs = response.data.cyBs
          this.all3.cacheLength = response.data.cacheLength
          this.all3.time = response.data.time
          this.all3.reserved = response.data.reserved
          this.show = true
        })
      },
      baocun:function(){
        setparam(this.all3).then((response)=>{
          this.all3.type = response.data.type
          this.all3.mac = response.data.mac
          this.all3.getIp = response.data.getIp
          this.all3.cyLv = response.data.cyLv
          this.all3.cjType = response.data.cjType
          this.all3.fp = response.data.fp
          this.all3.cyBs = response.data.cyBs
          this.all3.cacheLength = response.data.cacheLength
          this.all3.time = response.data.time
          this.all3.reserved = response.data.reserved

        	this.$message.success('设置成功');
          this.log3 = true
        })
      },
      getxialaall:function(){
        getxiala('cjType').then((response)=>{
          this.xialaall.caijileixinglist = response.data
        })
        getxiala('fpType').then((response)=>{
          this.xialaall.fenpinlist = response.data
        })
        getxiala('cyBsType').then((response)=>{
          this.xialaall.beicaiyanglist = response.data
        })
      },
      socket:function(){
        var that = this
        this.ws = new WebSocket("ws://"+process.env.IP+"/websocket");
        this.ws.onopen = function(event)
        {
          console.log('websocket已连接')
        };
        this.ws.onmessage = function (event)
        {

          event.data.split(',').forEach(function(v, i){
              that.shu.push(v)
          });
          that.qushitu('gengxin')
        };
        this.ws.onclose = function(event)
        {
          console.log("连接已关闭...");
        };
      },
      lianjie:function(){
        lianjieshuju(this.all).then((response)=>{
        	this.socket()
        	this.log2 = false
        })
      },

      handlePreview:function(val){
        this.shu = []
        var that = this
        var reader = new FileReader();
        var file = val.raw;
        reader.readAsText(file, 'utf-8');
        reader.onload = function(){
            reader.result.split(',').forEach(function(v, i){
              // if(that.shu.length < 300){
              //   that.shu.push(v)
              // }
              that.shu.push(v)
            });
            that.qushitu()
        };
        reader.onerror = function(){
            console.log('读取失败');
            console.log(reader.error);
        };
      },
      fuliye:function(){
        this.fuliyem =  !this.fuliyem
        this.qushitu('gengxin')
      },
      qushitu:function(gengxin){

          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            tooltip: {},
            backgroundColor: '#fff',
            visualMap: {
              show: false,
              dimension: 2,
              min: -1,
              max: 1,
              inRange: {
                color: [
                  '#313695',
                  '#4575b4',
                  '#74add1',
                  '#abd9e9',
                  '#e0f3f8',
                  '#ffffbf',
                  '#fee090',
                  '#fdae61',
                  '#f46d43',
                  '#d73027',
                  '#a50026'
                ]
              }
            },
            xAxis3D: {
              type: 'value'
            },
            yAxis3D: {
              type: 'value'
            },
            zAxis3D: {
              type: 'value'
            },
            grid3D: {
              viewControl: {
                // projection: 'orthographic'
              }
            },
            series: [
              {
                type: 'surface',
                wireframe: {
                  // show: false
                },
                equation: {
                  x: {
                    step: 0.1,
                  },
                  y: {
                    step: 0.02,
                    max:0.5
                  },
                  z: function (x, y) {
                    if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                      return '-';
                    }
                    console.log(Math.sin(x * Math.PI) * Math.sin(y * Math.PI))
                    return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
                  }
                },
                data: [
                    [-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0],
                    [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0],
                    [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0],
                    [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0],
                    [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]
                ]
              }
            ],
            
          };

          option && myChart.setOption(option);

      }

		}
	}
</script>


<style scoped>

</style>
